<template>
    <view class="page-account-info">
        <view class="mx-4">
            <view class="mb-2 text-center">
                <button
                    class="avatar"
                    hover-class="none"
                    open-type="chooseAvatar"
                    style="background-color: transparent"
                    @click="changeAvatar"
                    @chooseavatar="changeAvatar"
                >
                    <u-image :src="proxy.$util.getFullImage(userInfo?.avatar)" shape="circle" width="180rpx" height="180rpx" class="inline-block"></u-image>
                    <view class="text-xs"> 点击修改头像 </view>
                </button>
            </view>
            <u-form borderBottom :label-width="180">
                <u-form-item label="账号" borderBottom>
                    {{ userInfo.username }}
                </u-form-item>
                <u-form-item label="昵称" borderBottom>
                    <view class="flex">
                        <input class="flex-1" :value="userInfo.nickname" placeholder="填写昵称" type="nickname" @input="e => userInfo.nickName = e.detail.value" @change="changeNickname"></input>
                        <u-icon name="edit-pen"></u-icon>
                    </view>
                </u-form-item>
                <u-form-item label="性别" borderBottom  @click="actionSheet.isShow = true">                    
                    <view class="flex" @click="actionSheet.isShow = true">
                        <text class="flex-1">{{ proxy.$util.setName(userInfo.sex, actionSheet.list) }}</text>
                        <u-icon name="edit-pen"></u-icon>
                    </view>
                </u-form-item>
                <u-form-item label="手机号" borderBottom>
                    <view class="flex">
                        <text class="flex-1">{{ userInfo.phone || '未绑定手机号' }}</text>
                        <u-tag class="tag-cyan" :text="userInfo.phone ? '更换手机号' : '去绑定'" plain shape="circle" @click="proxy.$util.gotoPage('/packageA/account/bindPhone')"></u-tag>
                    </view>
                </u-form-item>
                <u-form-item label="绑定微信" borderBottom>
                    <view class="flex">
                        <text class="flex-1">{{ userInfo.wxOpenid ? '已绑定' : '未绑定' }}</text>
                        <u-tag class="tag-cyan" v-if="!userInfo.wxOpenid" :text="userInfo.wxOpenid ? '解绑' : '去绑定'" plain shape="circle" @click="bindWechatLock"></u-tag>
                    </view>                    
                </u-form-item>
                <u-form-item label="会员到期" borderBottom>
                    {{ userInfo.membersDate }}
                </u-form-item>
                <u-form-item label="注册时间" borderBottom>
                    {{ userInfo.createTime }}
                </u-form-item>
                <u-form-item label="信用分" borderBottom>
                    {{ userInfo.creditScore }}
                </u-form-item>
                <u-form-item label="简介" v-if="v">
                    <view class="flex" @click="showNickname('intro')">
                        <text class="flex-1">{{ userInfo.intro || '填写简介' }}</text>
                        <u-icon name="edit-pen"></u-icon>
                    </view>
                </u-form-item>
            </u-form>
        </view>
        <edit-nickname ref="refEditNickname" @confirm="getUserInfo"/>
        <u-action-sheet :list="actionSheet.list" v-model="actionSheet.isShow" @click="selectActionSheet"></u-action-sheet>
    </view>
</template>
<script setup lang="ts">
import { uploadImg } from '@/static/js/upload';
import { onLoad, onShow } from '@dcloudio/uni-app'
import { useAppStore } from '@/stores/app';
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const appStore = useAppStore();
import EditNickname from './components/editNickname.vue';
const refEditNickname = ref();
let v = ref(false); // false审核，true正式发布
let userInfo = reactive({
    avatar: '',
    userId: null,
    username: '',
    nickname: '',
    phone: '',
    sex: '0',
    membersDate: '',
    createTime: '',
    creditScore: null,
    wxOpenid: null,
    intro: null,
});
let actionSheet = reactive({
    isShow: false,
    name: {},
    list: [
        {id: '0', text: '隐私',name: '隐私'},
        {id: '1', text: '男',name: '男'},
        {id: '2', text: '女',name: '女'},
    ],
});
const getUserInfo = () => {
   appStore.getUserInfo().then(res => {
        proxy.$util.resetForm(userInfo, res);
    }) 
};
const showNickname = (type) => {
    refEditNickname.value.init(userInfo, type);
};
const changeAvatar = (e:any) => {
    let val = e.detail.avatarUrl;
    console.log(val);
    if(val){
        uploadImg('/admin/sys-file/upload', val).then(res => {
            userInfo.avatar = res.url;
            let params = {
                userId: userInfo.userId,
                username: userInfo.username,
                avatar: res.url
            };
            appStore.editUserInfo(params).then(res => {
                getUserInfo();
            })
        });
    }
};
const selectActionSheet = (index) => {
    let obj = actionSheet.list[index];
    let params = {
        userId: userInfo.userId,
        sex: obj.id,
    }
    appStore.editUserInfo(params).then(res => {
        getUserInfo();
    })
}
const changeNickname = (e) => {
    let params = {
        userId: userInfo.userId,
        nickname: e.detail.value,
    };
    appStore.editUserInfo(params).then(res => {
        getUserInfo();
    })
}
const bindWechatLock = () => {
    appStore.bindWechat().then(res => {
        getUserInfo();
    })
}
onShow(() => {
    v.value = appStore.versionStatus;
    getUserInfo();
})
</script>